<template>

	<view class=" ">
		<view class="p-10 bg-white">
			<view class="banmi_flex a-c">
				<view class="p-t-b-10 banmi_flex a-c">
					<view class="" style="width: 40%;">
						<uni-easyinput v-model="keyword" placeholder="图标名称" confirm-type="search" @confirm="on_keyword">
						</uni-easyinput>
					</view>
					<view class="p-l-r-10 banmi_flex">
						<button @click="on_keyword" type="primary" style="background-color: #007AFF;width: 60px;"
							size="mini">查询</button>
						<button class="m-l-10" @click="on_keyword_all" type="primary"
							style="background-color: #007AFF;width: 60px;" size="mini">重置</button>

					</view>
				</view>
			</view>
			<view class="p-10">
				<text class="m-l-10 cred">图标免费可商用-来源：https://iconpark.oceanengine.com/</text>
			</view>


			<view class="">
				<view class="p-20  bm-classify">
					<view v-for="(item,index) in list" :key="index" class="banmi_flex j-c"
						:style="is_mounted==1? 'width: 100px;height: 90px;' : 'width: 100px;height: 140px;' ">
						<view class="t-c">
							<view class="banmi_flex j-c ">
								<icon-park class="icon-color banmi_flex a-c" :type="item.icon" theme="outline"
									style="font-size: 60rpx;" />
							</view>

							<view class="f-14  c-7">
								{{item.name}}
							</view>

							<button v-if="is_mounted==0" @click="on_copy(item.icon)" class="f-14  c-7  p-t-b-10">
								<text class="button-color">复制icon</text>
							</button>
							<button v-if="is_mounted==0" class="f-14  c-7  " @click="on_html(item.icon)">
								<text class="button-color">复制代码</text>
							</button>

							<button v-if="is_mounted==1" class="f-14  c-7  " @click="on_ok(item.icon)">
								<text class="button-color">选择</text>
							</button>

						</view>
					</view>
				</view>
				<view style="width: 100%;padding: 0 40rpx 0 80rpx;">
					<uni-pagination @change="getPage" show-icon="true" :pageSize="100" :total="total" current="1"
						style="float: left;margin-bottom: 10px;"></uni-pagination>
				</view>
			</view>
			<view class="" style="height: 100px;">

			</view>
		</view>


	</view>



	</view>
</template>

<script>
	import {
		IconPark
	} from '@icon-park/vue/es/all';
	export default {
		components: {
			IconPark,
		},
		props: {
			is_mounted: {
				type: Number,
				default () {
					return 0;
				}
			},

		},
		data() {
			return {
				menu_list: [{
						"id": 0,
						"name": "平台管理",
					},

				],
				nav_index: 0,
				name: '',
				list: [],
				id: 0,
				total: 0,
				keyword: ''



			}
		},
		mounted() {
			this.page = 1;
			this.init();
		},
		methods: {
			on_ok(icon) {
				this.$emit('img_ok', icon)
			},
			on_copy(name) {
				uni.setClipboardData({
					data: name,
					success: function() {
						uni.showToast({
							title: '复制成功'
						})
					}
				});
			},
			on_html(name) {
				var name = '<icon-' + name + ' size="40" color="#333" >' + '</icon-' + name + '>'
				this.on_copy(name)
			},

			img_ok() {
				this.init()
			},
			getPage(id) {
				this.page = id.current;
				this.init()
			},
			on_keyword_all() {
				this.keyword = '';
				this.page = 1;
				this.init();
			},
			on_keyword() {
				if (!this.keyword) {
					uni.showToast({
						title: '请输入搜索词',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '搜索中'
				})
				this.page = 1;
				this.init();
			},
			async init() {
				var that = this;
				let requestParams = {
					page: this.page,
					keyword: this.keyword
				};
				const ret = await this.Banmikeji.Iconpark_index(requestParams);
				uni.hideLoading()
				if (ret.status == 200) {
					this.list = ret.data.list.data;
					this.total = ret.data.list.total;

				}

			},
		}
	}
</script>

<style>
	button::after {
		border: none;
	}

	button {
		background-color: unset;
		padding: 0;

	}
</style>